.disabled {
    filter: grayscale(0.95);
}

.container {
    background-color: #F9F9FA;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
}

.banner {
    margin: 20rpx 30rpx;
    height: 270rpx;
}

.p {
    font-size: 28rpx;
    color: #20362B;
}

.banner-view {
    position: relative;
    z-index: 10;
    color: white;
    font-size: 28rpx;
    padding: 0 30rpx 0 40rpx;
    box-sizing: border-box;
}

.banner-num {
    font-size: 68rpx;
    font-weight: bold;
}

.banner-title {
    margin-top: 50rpx;
}

.banner-data {
    margin-top: 75rpx;
    display: flex;
    justify-content: space-between;
}

.banner-btn.mini-btn {
    width: 151rpx;
    height: 72rpx;
    background-color: #fff;
    color: #00D679;
    font-size: 32rpx;
    padding: 0;
    margin-top: 10rpx;
}

.transparent-btn.mini-btn {
    background: rgba(0, 178, 101, 0.35);
    border: 2rpx solid #FFFFFF;
    color: #FFFFFF;
}

.banner-bottom {
    margin-top: 10rpx;
    display: flex;
    align-items: center;
}

.banner-bottom .arrow {
    width: 30rpx;
    height: 30rpx;
    transform: rotate(180deg);
}

.banner-link {
    letter-spacing: 10rpx;
    position: absolute;
    right: 25rpx;
    top: 25rpx;
    padding: 10rpx 26rpx;
    color: #ffffff;
}

.nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    text-align: center;
    margin-top: 30rpx;
    // grid-column-gap: 70rpx;
}

.nav-icon {
    width: 144rpx;
    height: 88rpx;
    margin-bottom: 6rpx;
}

.plan-list {
    background-color: white;
    margin-top: 30rpx;
    border-radius: 24rpx;
    min-height: 1200rpx;
    padding: 30rpx;
    box-sizing: border-box;
}

.plan-list-title {
    font-size: 32rpx;
    font-weight: bold;
}

.plan {
    padding: 30rpx 0;
    margin-top: 30rpx;
    border-bottom: 1px solid #EFF2F5;
    display: grid;
    grid-template-columns: 100rpx 420rpx 120rpx;
    grid-column-gap: 24rpx;
}

.plan-icon {
    width: 100rpx;
    height: 100rpx;
    background: #EFF2F5;
    border-radius: 7rpx;
}

.plan-name {
    font-size: 32rpx;
    font-weight: bold;
}

.plan-date {
    font-size: 28rpx;
    color: #9497B1;
    margin-top: 6rpx;
}

.plan-labels {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16rpx;
    position: relative;
    top: -6rpx;
    left: -6rpx;
}

.plan-label {
    width: 118rpx;
    height: 42rpx;
    background: #FFF9EB;
    border-radius: 4rpx;
    color: #FFB12D;
    margin: 6rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plan-status {
    text-align: right;
}

.plan-people {
    color: #FF7E68;
}

.plan-num {
    font-size: 32rpx;
    font-weight: bold;
}

.plan-status-desc {
    font-size: 28rpx;
    color: #9497B1;
    margin-top: 6rpx;
}

.system-decrease {
    display: flex;
    align-items: flex-start;
    font-size: 28rpx;
}

.decrease-img {
    margin-left: -5rpx;
    width: 36rpx;
    height: 36rpx;
}

.dot {
    color: #FF7E68;
    font-size: 45rpx;
    height: 20rpx;
    box-sizing: border-box;
    line-height: 0rpx;
}

.balance-recharge {
    height: 60rpx !important;
}

.popup {
    padding-bottom: 80rpx !important;
}

.popup-container {
    width: 100%;
    height: 910rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popup-image {
    width: 100%;
}

.popup-box {
    width: 560rpx;
    position: absolute;
    top: 280rpx;
}

.popup-title {
    text-align: center;
    font-weight: bold;
    font-size: 36rpx;
}

.popup-content {
    color: #565868;
    line-height: 40rpx;
    font-size: 28rpx;
    margin-top: -15rpx;
}

.short-btn.popup-btn {
    width: 550rpx;
    height: 94rpx;
    margin-top: 40rpx;
}

.popup-time {
    color: #00D679;
}

.popup-tips {
    font-size: 24rpx;
}

.tc {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(127, 127, 127, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bgtwo {
    position: absolute;
    width: 689rpx;
    box-sizing: border-box;
    top: -120rpx;
    left: 35rpx;
    z-index: 999;

    .bgtwoimg {
        width: 100%;
    }
}

.tc .tcbox {
    position: absolute;
    top: 290rpx;
    left: 0;
    box-sizing: border-box;
    padding: 0 35rpx;
    width: 670rpx;
    height: 761rpx;
}

.tctext {
    font-size: 32rpx;
    box-sizing: border-box;
    padding: 36rpx 24rpx;
    background: rgba(188, 238, 218, .36);
    border-radius: 16rpx;

    .topimg {
        width: 28rpx;
        height: 28rpx;
    }

    .toptext {
        display: flex;
        align-items: center;
        color: #00C271;
        font-size: 32rpx;
    }
}

.yellow {
    color: #20362B;
    font-weight: bold;
    position: relative;
    z-index: 999999999;

    &::after {
        display: block;
        content: '';
        background: linear-gradient(90deg, #E7F8F1 0%, #99F9D1 54%, #E7F8F1 100%);
        width: 100%;
        height: 10rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -9;
    }
}

.tcbtnbox {
    margin-top: 32rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tcbtnbox .btn {
    background-color: #00d06e;
    width: 75%;
    height: 94rpx;
    line-height: 94rpx;
    text-align: center;
    font-size: 36rpx;
    border-radius: 47rpx;
    justify-content: center;
    color: #ffffff;
    z-index: 9999;
}

.longinsuretc {
    overflow: auto;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    background: rgba(21, 25, 36, .7);
    padding-top: 30rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;

    .btnbox {
        width: 650rpx;
        padding: 0 30rpx 0;
        margin-top: 900rpx;
        margin-bottom: 40rpx;

        .btn {
            width: 100%;
            box-sizing: border-box;
            background-color: #F66B3D;
            font-size: 26rpx;
            color: #ffffff;
            height: 94rpx;
            border-radius: 48rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .content {
        position: relative;
        width: 650rpx;
        box-sizing: border-box;
        background-color: #FFEBD2;
        border-radius: 36rpx;

        .top {
            background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerd233b1cd-4ae0-4af3-b870-a77cb4e8ec53.png');
            width: 100%;
            height: 324rpx;
            background-size: 100%;
            background-repeat: no-repeat;
            .icon-close {
              width: 50rpx;
              height: 50rpx;
              position: absolute;
              right: 10px;
              top: 10px;
            }
        }

        .padding {
            position: absolute;
            left: 0;
            top: 204rpx;
            background: #FFEBD2;
            border-bottom-left-radius: 36rpx;
            border-bottom-right-radius: 36rpx;

            .textbox {
                position: relative;
                padding: 40rpx 0 0;
                background: linear-gradient(217deg, #FFF4E3 1%, #FEF2E6 97%);
                box-shadow: 0px 2px 24px 0px #EBBB93;
                border: 2rpx solid #FFFFFF;
                border-radius: 20rpx;
                font-size: 24rpx;
                color: #915435;

                .jbimg {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 91rpx;
                    height: 85rpx;
                }

                .toptext {
                    padding: 0 24rpx;
                }

                .bottombox {
                    margin-top: 24rpx;
                    padding: 20rpx 24rpx;
                    background-color: #ffffff;
                    min-height: 100rpx;
                    border-radius: 20rpx;

                    .title {
                        font-size: 24rpx;
                        line-height: 36rpx;
                        letter-spacing: 0rpx;
                        background: linear-gradient(94deg, #CA0200 0%, #700000 109%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        background-clip: text;
                        text-fill-color: transparent;
                        margin-bottom: 20rpx;
                    }

                    .flexbox {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 12rpx;

                        .item {
                            box-sizing: border-box;
                            border-radius: 12rpx;
                            width: 252rpx;
                            height: 187rpx;
                            background: #FFF6F0;
                            padding: 24rpx 18rpx 34rpx;
                            display: flex;
                            align-items: center;
                            flex-direction: column;

                            .toptextccc {
                                font-size: 32rpx;
                                color: #B90100;
                                margin-bottom: 24rpx;
                            }

                            .bottom {
                                color: #915435;
                                font-size: 24rpx;
                            }
                        }
                    }
                }
            }
        }

    }
}